/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, consoleLog } from '../../utils/utilsToast'

export default class Zichan extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            money_total: '',
            clear_total: '',
            new_profit: '',
            fund_list: [],
            zichan_list: [],
        }
        // this.netRequest = new NetRequest();
    }

    async componentWillMount(){
        try {
            await this.loadFundData();
        } catch (error) {
            // // console.log(error);
        }

    }

    componentDidMount(){
        console.log(global.user.userData)
        this.willFocus = this.props.navigation.addListener('willFocus', (payload) => {
            this.loadNetData();
        })
    }

    componentWillUnmount(){
        this.willFocus.remove();
    }

    onBack = () => {
        this.props.navigation.state.params.onCallBack();
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadFundData = () => {
        let url = ServicesApi.get_assets_list;
        let data = {
            member_id: global.user.userData.id,
            token: global.user.userData.token
        }

        Services.post(url, data, true)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log(result.data);
                    this.updateState({
                        money_total: result.data.money_total,
                        clear_total: result.data.clear_total,
                        new_profit: result.data.new_profit,
                        fund_list: result.data.fund_list,
                    })
                }else{
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    loadNetData = () => {
        let url = ServicesApi.Myassetindex;
        let data = {
            member_id: global.user.userData.id,
            token: global.user.userData.token
        }

        Services.post(url, data)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log(result.data);
                    this.updateState({
                        zichan_list: result.data.list
                    })
                }else{
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    onPushNavigator = (compent) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
        })
    }

    onPushToJijin = (compent, fund_id, fund_name) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            fund_id: fund_id,
            fund_name: fund_name,
            onCallBack:()=>{
                this.loadFundData();
            }
        })
    }

    onPushToZichan = (compent, zichan_id) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            zichan_id: zichan_id,
            onCallBack:()=>{
                this.loadNetData();
            }
        })
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {'我的资产'}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                    rightButton = {UtilsView.getRightKefuBlackButton(() => this.onPushNavigator('Kefu'))}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <ScrollView>
                    <View style={GlobalStyles.userNeiTop}>
                        <Text style={GlobalStyles.userNeiTopline1}>总资产</Text>
                        <Text style={GlobalStyles.userNeiTopline2}>{this.state.money_total}</Text>
                        <Text style={GlobalStyles.userNeiTopline3}>总收益： {this.state.clear_total}   已结算收益： {this.state.new_profit}</Text>
                    </View>
                    <View style={GlobalStyles.whiteModule}>
                        <View style={[GlobalStyles.titleModule,GlobalStyles.flexRowBetween]}>
                            <View style={[GlobalStyles.titleLeft, GlobalStyles.flexRowStart]}>
                                <Image source={require('../../assets/images/icons/icon_jinjinrengou.png')} style={styles.titleIcon} />
                                <Text style={GlobalStyles.titleText}>我的私募基金</Text>
                            </View>
                        </View>
                        <View style={GlobalStyles.fundModule}>
                            {this.fundList(this.state.fund_list)}
                        </View>
                    </View>
                    <View style={[GlobalStyles.whiteModule]}>
                        <View style={[GlobalStyles.titleModule,GlobalStyles.flexRowBetween]}>
                            <View style={[GlobalStyles.titleLeft, GlobalStyles.flexRowStart]}>
                                <Image source={require('../../assets/images/icons/icon_zichanzonglan.png')} style={styles.titleIcon} />
                                <Text style={GlobalStyles.titleText}>我的权益投资</Text>
                            </View>
                            <TouchableOpacity onPress={()=>{this.onPushNavigator('ZichanAdd')}} style={[GlobalStyles.titleRight, GlobalStyles.flexRowStart]}>
                                <Text style={[GlobalStyles.titleMoreText, {color: GlobalStyles.themeColor}]}>添加</Text>
                                <Image source={require('../../assets/images/icons/icon_index_more_themecolor.png')} style={GlobalStyles.titleMoreIcon} />
                            </TouchableOpacity>
                        </View>
                        <View style={[GlobalStyles.fundModule, {marginBottom: 10}]}>
                            {this.zichanList(this.state.zichan_list)}
                        </View>
                    </View>
                </ScrollView>
            </View>
        );
    }



    fundList = (row) => {
        let fundList = [];
        for (var i = 0; i < row.length; i++) {
            let fund_id = row[i].fund_id;
            let fund_name = row[i].fund_name;
            let fundItem = (
                <TouchableOpacity key={i} onPress={() => {this.onPushToJijin('Jijin', fund_id, fund_name)}} style={[styles.myFundItem, GlobalStyles.flexRowBetween]}>
                    <Text style={styles.myFundText}>{row[i].fund_name}</Text>
                    <Image source={require('../../assets/images/icons/icon_fund_chakan.png')} style={styles.lookIco} />
                </TouchableOpacity>
            )
            fundList.push(fundItem);
        }
        return(fundList);
    }



    zichanList = (row) => {
        let zichanList = [];
        for (var i = 0; i < row.length; i++) {
            let zichan_id = row[i].id;
            let zichan_target = row[i].target;
            let zichanItem = (
                <TouchableOpacity key={i} onPress={() => {this.onPushToZichan('ZichanDetail', zichan_id)}} style={[styles.myFundItem, GlobalStyles.flexRowBetween]}>
                    <Text style={styles.myFundText}>{row[i].target}</Text>
                    <Image source={require('../../assets/images/icons/icon_fund_chakan.png')} style={styles.lookIco} />
                </TouchableOpacity>
            )
            zichanList.push(zichanItem);
        }
        return(zichanList);
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
    titleIcon: {
        width: 27,
        height: 27,
        marginRight: 10
    },
    myFundItem: {
        borderColor: '#d9d9d9',
        borderWidth: 1,
        borderRadius: 8,
        height: 45,
        marginBottom: 10,
        paddingLeft: 15,
        paddingRight: 15,
    },
    myFundText: {
        color: GlobalStyles.themeColor,
        fontSize: 16
    },
    lookIco: {
        width: 15,
        height: 15,
    },
});
